<template>
	<view class="user-center-mes">
		<cell-group>
			<cell-item title="头像" @click="selectAvatar">
				<template v-slot:right>
					<image :src="userData.detail.avatar?util.previewImg(userData.detail.avatar):'/static/icons/home_selected_icon.png'" class="avatar"/>
				</template>
			</cell-item>
			<cell-item title="账号" :value="userData.detail.userName" :arrow="false"></cell-item>
			<cell-item title="姓名" :value="userData.detail.nickName || '设置'"  @click="changeEditNickNameShow"></cell-item>
			<cell-item title="密码" value="修改" :border="false" @click="changeEditPasswordShow"></cell-item>
		</cell-group>
		<u-modal title="修改密码" :show="editPasswordData.show" @click="editPassword" @close="changeEditPasswordShow">
			<u-input placeholder="请输入原始密码" :password="!lookOldPassord" v-model="userData.password.oldPassword">
				<template v-slot:icon>
					<view @click="handleLookOldPassword" class="ml-30">
						<image src="@/static/icons/look_active_icon.png" class="look-active-icon" v-if="lookOldPassord"/>
						<image src="@/static/icons/look_icon.png" class="look-icon" v-else/>
					</view>
				</template>
			</u-input>
			<u-input  placeholder="请输入新密码（数字+字母，6-12个字符）" :password="!lookNewPassord" v-model="userData.password.newPassword">
				<template v-slot:icon>
					<view @click="handleLookNewPassword" class="ml-30">
						<image src="@/static/icons/look_active_icon.png" class="look-active-icon" v-if="lookNewPassord"/>
						<image src="@/static/icons/look_icon.png" class="look-icon" v-else/>
					</view>
				</template>
			</u-input>
			<u-input  placeholder="请确认新密码" :password="!lookRepeatPassord" v-model="userData.repeatPassword">
				<template v-slot:icon>
					<view @click="handleLookRepeatPassword" class="ml-30">
						<image src="@/static/icons/look_active_icon.png" class="look-active-icon" v-if="lookRepeatPassord"/>
						<image src="@/static/icons/look_icon.png" class="look-icon" v-else/>
					</view>
				</template>
			</u-input>
		</u-modal>
		<u-modal title="设置姓名" :show="editNickNameData.show" @click="editNickName" @close="changeEditNickNameShow">
			<u-input  placeholder="请输入姓名" v-model="userData.nickName" ></u-input>
		</u-modal>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue'
	import { util, tip, storage } from '@/utils'
	import { auth } from '@/api'
	import { useAuthStore } from '@/store/auth'
	import { onLoad } from '@dcloudio/uni-app';
	
	const authStore = useAuthStore()
	const lookNewPassord = ref(false)
	const lookOldPassord = ref(false)
	const lookRepeatPassord = ref(false)
	const userData:any = reactive({
		detail:{
			nickName:''
		},
		nickName:'',
		password:{
			oldPassword:'',
			newPassword:''
		},
		repeatPassword:''
	})
	
	
	onLoad(() => {
		userProfile()
	})
	
	const handleLookOldPassword = () => {
		lookOldPassord.value = !lookOldPassord.value
		setTimeout(() => {
			lookOldPassord.value = !lookOldPassord.value
		}, 300)
	}
	
	const handleLookNewPassword = () => {
		lookNewPassord.value = !lookNewPassord.value
		setTimeout(() => {
			lookNewPassord.value = !lookNewPassord.value
		}, 300)
	}
	
	const handleLookRepeatPassword = () => {
		lookRepeatPassord.value = !lookRepeatPassord.value
		setTimeout(() => {
			lookRepeatPassord.value = !lookRepeatPassord.value
		}, 300)
	}
	
	const userProfile = () => {
		auth.getUserProfile().then((res:any) => {
			userData.detail = res.data
		})
	}
	
	const selectAvatar = () => {
		uni.chooseImage({
			count:1,
			sourceType:['album', 'camera'],
			success:(res:any) => {
				console.log(res)
				if(res.errMsg == 'chooseImage:ok') {
					const domain = import.meta.env.VITE_APP_DOMAIN
					const baseApi = import.meta.env.VITE_APP_BASE_API
					const tempFile = res.tempFiles[0]
					const token = authStore.token || storage.getLocalStorage('token')
					uni.uploadFile({
						filePath:tempFile.path,
						name:'avatarfile',
						url:domain + baseApi + '/system/user/profile/avatar',
						header: {
							"Content-type":"multipart/form-data",
							"Authorization": "Bearer " + token
						},
						success:(res1:any) => {
							if(res1.statusCode == 200) {
								const data = JSON.parse(res1.data)
								if(data.code == 200) {
									tip.showToast('头像修改成功！')
									userProfile()
									authStore.setUserInfo()
								} else {
									tip.showToast(data.msg)
								}
							} else {
								tip.showToast(res1.errMsg)
							}
						}
					})
				} else {
					console.log(JSON.stringify(res.errMsg))
				}
			}
		})
	}
	
	
	const editNickNameData = reactive({
		show:false,
	})
	const changeEditNickNameShow = () => {
		editNickNameData.show = !editNickNameData.show
	}
	const editNickName = () => {
		if(!userData.nickName) return tip.showToast('请输入您的姓名')
		userData.detail.nickName = userData.nickName
		auth.setProfile(userData.detail).then((res:any) => {
			changeEditNickNameShow()
		})
	}
	
	const editPasswordData = reactive({
		show:false,
	})
	const changeEditPasswordShow = () => {
		editPasswordData.show = !editPasswordData.show
	}
	const editPassword = () => {
		if(!userData.password.oldPassword) return tip.showToast('请输入旧密码！')
		if(!userData.password.newPassword) return tip.showToast('请输入新密码！')
		if(userData.password.oldPassword === userData.password.newPassword) return tip.showToast('新密码不能与旧密码相同！')
		if(userData.password.newPassword.length < 6  || userData.password.newPassword.length > 12) return tip.showToast('请输入6-12个字符（数字+字母）的新密码！')
		if(userData.password.newPassword !== userData.repeatPassword) return tip.showToast('确认密码和新密码不一致，请重新输入！')
		auth.setPassword(userData.password).then((res:any) => {
			authStore.setToken('')
			authStore.setExpiresIn('')
			tip.showToast('密码修改成功,请重新登录！')
			uni.reLaunch({
				url:'pages/auth/login'
			})
		})
	}
	
</script>

<style lang="scss" scoped>
	.user-center-mes {
		margin-top:20rpx;
		.avatar {
			width: 67rpx;
			height: 67rpx;
			border-radius: 50%;
		}
		.look-icon {
			width:30rpx;
			height: 11rpx;
		}
		.look-active-icon {
			width: 30rpx;
			height: 19rpx;
		}
	}
</style>
